<template>
    <div class="member-layout storage">
        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row"
             @click="handler(index)"
        >
            <mu-paper class="demo-paper" :zDepth="1" >
            <div style="position:absolute; z-index:1;left: 4px; top: 2px;" v-if="isSelectBox">

              <el-checkbox @change="setUser" v-model="state" v-show="isMutpart"></el-checkbox>
                <el-radio class="radio" v-model="currentRadio.index" :label="index" v-show="!isMutpart"> &nbsp;</el-radio>

            </div>
                <div  class="tr close-del" v-if="isClose" @click.stop="viewClick">
                    <i class="fa el-icon-circle-cross close-fa-circle" ></i>
                    <!--<el-checkbox @change="setUser" v-model="state" v-show="isMutpart"></el-checkbox>-->
                    <!--<el-radio class="radio" v-model="currentRadio.index" :label="index" v-show="!isMutpart"> &nbsp;</el-radio>-->
                </div>
            <div class="card-01 card-storage" style="position:relative; z-index:2;padding-top:1.5em">
              <el-row :gutter="20">
                  <el-col :span="8">
                      <div class="grid-content pd" >
                        <div class="img" v-if="isGoods">
                          <img v-if="item.pictureName" :src="static_url + item.pictureName"  >
                          <img v-else-if="item.pictureNames" :src="static_url + item.pictureNames"  >
                          <img v-else-if="item.goodsPicturesName" :src="static_url + item.goodsPicturesName"  >
                          <img v-else-if="item.picturename" :src="static_url + item.picturename"  >
                            <!--onerror="javascript:this.src='../../../static/img/timg.jpeg'"-->
                          <img v-else src="../../../static/img/goods.png">
                        </div>
                        <div v-else class="circle" :class="classText.stateClass">{{classText.stateText}}</div>

                      </div>
                  </el-col>
                  <el-col :span="16">
                      <div class="grid-content" style="margin-left: 10px">
                          <slot></slot>
                          <!--<span class="storage-info" @click="info(item.id)">查看</span>-->
                          <span v-if="buttonText" class="storage-info" @click.stop="viewClick" style="cursor:default">{{buttonText}}</span>
                      </div>
                  </el-col>
              </el-row>
            </div>
            </mu-paper>

        </div>
    </div>
</template>

<script>
    export default {
        name:"keepalive-false",
        props: {
            currentRadio:{
                type:Object,
                default:function () {
                    return {
                        index:-1
                    }
                }
            },
            item: '',
            index: '',
            backSelectItems:'',
            classText: '',   // 状态文本和样式对象
            buttonText: '',   // 按钮文本(查看)
            isGoods:'',
            isMutpart:{
                type:Boolean,
                default:false
            },
            viewClick:{       //点击查看
                type:Function,
//                default:function(){alert("并未实现查看接口");},
                required:false
            },
            backItems:{
                type:Function,
                default:function(){},
                required:false
            },
            list:'',
            isClose:{
                type:Boolean,
                default:false
            },
            isSelectBox:{
                type:Boolean,
                default:true
            },
        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],
                isMultiselect: false,
                state: false,
                static_url: this.$cfg.static_url + "/",

            }
        },
        methods: {
            handler: function (index) {
                this.state = !this.state;
                this.currentRadio.index = index;
                this.setUser();
            },
            setUser: function () {
                if(this.isMutpart){
                  if(this.state){
                       this.getChildItem(this.item);
                  }else{
                      this.deleteChildItem(this.item);
                  }
                  this.backItems(this.backSelectItems);
                }else {
                  this.backItems(this.item);
                }


            },
            getChildItem(res){

                this.backSelectItems.push(res);
            },
            deleteChildItem(res){
                let self = this;

                let arr = this.backSelectItems.filter(function (item) {
                  console.log(item)
                    if(item!=res){
                      console.log(item)
                        return item;
                    }
                });
                console.log(this.backSelectItems)
                this.backSelectItems.splice(0, this.backSelectItems.length);

                arr.forEach(item => {
                    this.backSelectItems.push(item);
                });

                console.log(this.backSelectItems)



            },
        },


    }
</script>

<style scoped>
    .card-01{
      border-bottom: none;
    }
    .l1{
      text-indent: initial;
      margin-top: -24px;
    }
    .demo-paper {
        /*display: inline-block;*/

        width: 100%;
        margin: 0;
        /*text-align: center;*/
    }
    .close-del{
        padding: 4px 4px 0 0;
    }
    .img{
        width: 70px;
        height: 70px;
        border-radius: 12px;
        /*border: 1px solid #cacaca;*/
        margin: 0;
    }
    .img img{
        width: 100%;
        height:100%;
    }
    .mu-paper-1{
        box-shadow: 0 2px 8px rgba(0,0,0,.157647),0 2px 8px rgba(0,0,0,.157647);
    }
</style>
